<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>star</title>
</head>
<body>
    <canvas id="canvas" style="border: 2px solid #ccc; display: block; margin: 20px auto 0;">
        当前浏览器不支持canvas，请更换浏览器后再试
    </canvas>
    <script>
        window.onload = function(){
            /** @type {HTMLCanvasElement} */ 
            var canvas = document.getElementById('canvas'),
                context = canvas.getContext('2d')
            // 画布宽高
            canvas.width = 800
            canvas.height = 700

            context.lineWidth = 10
            drawStart(context, 150, 300, 400, 400, 100)
        }
        function drawStart(cxt, r, R, x, y, rot = 0){
            cxt.beginPath()
            for(var i = 0; i < 5; i ++){
                cxt.lineTo(Math.cos((18 + i*72 - rot)/180 * Math.PI) * R + x, -Math.sin((18 + i*72 - rot)/180 * Math.PI) * R + y)
                cxt.lineTo(Math.cos((54 + i*72 - rot)/180 * Math.PI) * r + x, -Math.sin((54 + i*72 - rot)/180 * Math.PI) * r + y)
            }
            cxt.closePath()
            cxt.stroke()
        }
    </script>
</body>
</html>